<template>
    <div>
        <div style="padding-top: 10px;width: 70%; margin: 0 auto">
            <el-card>
                <div slot="header" style="text-align: left">
                    <span style="font-weight: bolder">用户信息</span>
                    <el-button style="float: right;padding: 3px 0;"  v-if="!modifying" @click="modifying=true" type="text">修改信息</el-button>
                    <el-button style="float: right;padding: 3px 0;color: red"  v-if="modifying" @click="modifying=false" type="text">保存信息</el-button>
                </div>
                <div style="display: flex">
                    <div style="width: 35%">
                        <img src="../assets/logo.png"/>
                        <div style="text-align: left;font-size: 16px;display: table;margin-left: 30px">
                            <div style="display: table-row;height: 50px">用户ID：<span style="display: table-cell" v-if="!modifying">{{message.id}}</span><el-input style="display: table-cell;width: 200px" v-if="modifying" v-model="message.id"></el-input></div>
                            <div style="display: table-row;height: 50px">欢迎你：<span style="display: table-cell" v-if="!modifying">{{message.name}}</span><el-input style="display: table-cell;width: 200px" v-if="modifying" v-model="message.name"></el-input></div>
                            <div style="display: table-row;height: 50px">您的电话：<span style="display: table-cell" v-if="!modifying">{{message.dial}}</span><el-input style="display: table-cell;width: 200px" v-if="modifying" v-model="message.dial"></el-input></div>
                            <div style="display: table-row;height: 50px">您的邮箱：<span style="display: table-cell" v-if="!modifying">{{message.email}}</span><el-input style="display: table-cell;width: 200px" v-if="modifying" v-model="message.email"></el-input></div>
                        </div>
                    </div>
                    <div style="width: 65%">
                        <el-tabs tab-position="left" style="height: 1000px">
                            <el-tab-pane label="我的订单"></el-tab-pane>
                            <el-tab-pane label="我的收藏"></el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </el-card>

        </div>
        <div class="tail" style="width: 100%;height:200px;background-color: #f4ffb8;margin: 0">
            <p>developed by lark chan</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Self",
        data(){
            return{
                modifying:false,
                message:{
                    id:'2271546108',
                    name:'陈博荃',
                    email:'18301032@bjtu.edu.cn',
                    dial:'15523144697',
                },
                like:[
                    {

                    },
                    {

                    },
                    {

                    },
                ]
            }
        }
    }
</script>

<style scoped>

</style>
